import React, { useState } from 'react';
import { LeftOutlined } from '@ant-design/icons';
import { Card, Modal } from 'antd';
import img1 from './person.jpg';
import { useNavigate } from 'react-router-dom';

// 模拟人员健康证数据
const personData = [
    {
        id: 1,
        name: '张三',
        age: 25,
        gender: '男',
        healthStatus: '健康',
        img: img1
    },
    {
        id: 2,
        name: '李四',
        age: 30,
        gender: '女',
        healthStatus: '健康',
        img: img1
    },
    {
        id: 3,
        name: '王五',
        age: 28,
        gender: '男',
        healthStatus: '健康',
        img: img1
    },
    {
        id: 4,
        name: '赵六',
        age: 22,
        gender: '女',
        healthStatus: '健康',
        img: img1
    },
    {
        id: 5,
        name: '孙七',
        age: 35,
        gender: '男',
        healthStatus: '健康',
        img: img1
    },
    {
        id: 6,
        name: '周八',
        age: 27,
        gender: '女',
        healthStatus: '健康',
        img: img1
    },
    {
        id: 7,
        name: '吴九',
        age: 29,
        gender: '男',
        healthStatus: '健康',
        img: img1
    },
    {
        id: 8,
        name: '郑十',
        age: 24,
        gender: '女',
        healthStatus: '健康',
        img: img1
    }
];

export default function Person() {
    const navigate = useNavigate();
    const [visible, setVisible] = useState(false);
    const [currentPerson, setCurrentPerson] = useState(null);

    const showModal = (person) => {
        setCurrentPerson(person);
        setVisible(true);
    };

    const handleCancel = () => {
        setVisible(false);
    };

    return (
        <div style={{ padding: "15px" }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <LeftOutlined onClick={() => { navigate(-1) }} />
                <div style={{ width: '100%', textAlign: 'center' }}>
                    <h3>人员健康证</h3>
                </div>
            </div>
            <hr style={{ marginTop: '10px' }}></hr>
            <div style={{ marginTop: '15px' }}>
                <Card>
                    <div>
                        <h3 style={{ color: '#91da93' }}>人员健康证</h3>
                    </div>
                    <div style={{ marginTop: '10px', display: 'flex', flexWrap: 'wrap' }}>
                        {personData.map(person => (
                            <img
                                key={person.id}
                                src={person.img}
                                style={{ width: '50%', boxSizing: 'border-box', padding: '5px' }}
                                onClick={() => showModal(person)}
                                alt=''
                            />
                        ))}
                    </div>
                </Card>
            </div>
            <Modal
                title="人员信息"
                visible={visible}
                onCancel={handleCancel}
                footer={null}
            >
                {currentPerson && (
                    <div>
                        <p>姓名: {currentPerson.name}</p>
                        <p>年龄: {currentPerson.age}</p>
                        <p>性别: {currentPerson.gender}</p>
                        <p>健康状况: {currentPerson.healthStatus}</p>
                    </div>
                )}
            </Modal>
        </div>
    );
}
